<template>
	<view>
		<!-- 蓝色背景区域 -->
		<view class="title" :style="{height: titleboxH + 'rpx'}">
			<view class="top-aera">
				<view class="sch">
					<!-- <u-icon name="list-dot" color="#fff" size="28px"></u-icon> -->
					<text @click="handShowpicker">&nbsp; {{schoolname || 'WYU'}}</text>
				</view>
				<view class="icon-box">
					<u-icon name="bell" color="#fff" size="28px"></u-icon>
					<u-icon name="search" color="#fff" size="32px" @click="toSearch()"></u-icon>
				</view>
			</view>
			<!-- 分类区域 -->
			<view class="sort-box">
				<text :class="{'sort-item-box':true,'addcolor': black== item.id}" v-for="(item) in sortArr"
					:key="item.id" @click="getProjlist(item.id,index)">{{item.name}}</text>
				<view class="fliter-box" @click="showPopCompent" :style="{width:fliterCount == 0 ? '90rpx':'105rpx'}">
					<text>{{fliterNum}}</text>
					<view class="sangle"></view>
				</view>
			</view>
		</view>
		<image class="add-ball" src="/static/imgs/addicon.png" mode="" @click="toPublish"></image>
		<!-- 滚动列表 -->
		<at-projcard-list @getProjId="toProjdetail" :reqProjData="reqProjData" :projList="projlist" :total="tatalList"
			:loading="cardloading" :nomore="unLoading" :scrollHeight="contHei" :scrollTop="scrollTop">
		</at-projcard-list>

		<!-- 弹出框内容 -->
		<fliter-pop :show="showPop" @fliterSelsect="fliterSelsect" @on-close="showPop = false"></fliter-pop>
		<!-- 选择器 -->
		<u-picker :columns="columns" :show="showpicker" @cancel="showpicker = false" closeOnClickOverlay="true"
			keyName="schoolName" @close="showpicker= false" @confirm="selectSchool">
		</u-picker>
	</view>
	</view>
</template>

<script>
	import {
		projlist,
		schoollist,
		burryPoint,
		projcount
	} from '@/common/http.api.js'
	import AtProjcardList from '@/components/AtProjcardList'
	import FliterPop from '@/pages/index/fliterPop.vue'
	import {random} from '@/utils/random.js'
	export default {
		components: {
			AtProjcardList,
			FliterPop
		},
		data() {
			return {
				showpicker: false,
				showPop: false,
				cardloading: true,
				unLoading: 0,
				contHei: 667,
				scrollTop: -1,
				titleboxH: uni.$topFixedHeight + 172,
				timer: null,
				tatalList:[],
				schoolInfolist:[],
				columns: [
					[]
				],
				black: '0',
				fliterCount: 0,
				schoolname: '',
				total:0,
				reqProjData: {
					schoolId:  uni.getStorageSync('schoolId') || '1',
					sortId: '0',
					department: '',
					grade: '',
					projName: '',
					grade: '',
					limit: 8,
					page: 1 ,
					num: [0, 100]
				},
				projlist: [],
				sortArr: [{
						id: '0',
						name: '推荐'
					},
					{
						id: '1',
						name: '竞赛'
					},
					{
						id: '2',
						name: '运动'
					},
					{
						id: '3',
						name: '其他'
					},
				],
			}
		},
		async onLoad() {
			this. setScrollHeight()
			this.setSchoolInfo()
			this.getProjlist()
		},
		computed: {
			fliterNum() {
				let txt = '筛选'
				if (this.fliterCount != 0) {
					txt = `筛选·${this.fliterCount}`
				}
				return txt
			}
		},
		methods: {
			async getListTotal(){
				const res = await projcount()
				this.tatalList = res.data
			},
			async getProjlist(sortId) {
				if (this.timer) clearTimeout(this.timer)
				uni.removeStorageSync('page') // 重置
				await this.getListTotal() // 重新获取 总数
				this.black = sortId // 控制变色
				this.reqProjData.sortId = sortId = typeof sortId == 'undefined' ? '0' : sortId
				this.reqProjData.page = random(this.tatalList[Number(sortId)],this.reqProjData.limit) // 随机分页
				this.unLoading = 0
				// console.log('刷新后的',this.unLoading);
				this.cardloading = true
				this.scrollTop = -1
				this.timer = setTimeout(async () => {
					const res = await projlist(this.reqProjData)
					this.scrollTop = 0 // 回到顶部
					this.projlist = res.data
					this.cardloading = false
					if(res.data.length < this.reqProjData.limit)
					this.projlist.forEach(async item =>{ //埋点浏览
						await burryPoint({projId:item.projId,num:1})
					})
					// 判断首次渲染时是否已经是最后一页，如果是则直接不再加载
					if(this.reqProjData.page == 1 && this.tatalList[Number(sortId)] <= this.reqProjData.limit) return this.unLoading ++
				}, 150)
			},
			setScrollHeight() {
				this.contHei = uni.$screenHeight - uni.$tabbarSafeheight - this.titleboxH
			},
			toProjdetail(id) {
				uni.navigateTo({
					url: `/pages/projDetail/projDetail?id=${id}`
				})
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			toPublish() {
				uni.navigateTo({
					url: '/pages/publish/publish'
				})
			},
			showPopCompent(){
				this.showPop = true
			},
			selectSchool(arr) {
				uni.setStorageSync('schoolId', arr.value[0].schoolId + '');
				this.schoolname = arr.value[0].schoolName
				this.reqProjData.schoolId = arr.value[0].schoolId + ''
				this.getProjlist('0')
				this.showpicker = false
			},
			async setSchoolInfo(){
				const res = await schoollist() 
				res.data.shift()
				this.schoolInfolist = res.data
				console.log(this.schoolInfolist);
				let schName = this.schoolInfolist.find(i => i.schoolId == uni.getStorageSync('schoolId')).schoolName
				this.schoolname = schName
			},
			handShowpicker() {
				this.columns[0] = this.schoolInfolist
				this.showpicker = true
			},
			async fliterSelsect(data, count) {
				uni.$loading()
				// 记录筛选个数
				this.fliterCount = count
				this.reqProjData = {
					...this.reqProjData,
					...data
				}
				const res = await projlist(this.reqProjData)
				this.projlist = res.data
			}
		},

	}
</script>

<style lang="scss" scoped>
	.add-ball {
		width: 100rpx;
		height: 100rpx;
		position: fixed;
		bottom: 5%;
		z-index: 9;
		border-radius: 50rpx;
		box-shadow: 5rpx 5rpx 5rpx #0004;
		opacity: 0.6;
		right: 30rpx;
	}

	.add-ball:hover {
		opacity: 1;
	}

	.title {
		width: 100%;
		position: relative;
		background: linear-gradient(to left, #5866f5, #4492f0);

		.top-aera {
			width: 92%;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 90rpx;
			display: flex;
			justify-content: space-between;

			.sch {
				// display: flex;
				color: #fff;
				font-size: 28px;
				font-weight: bold;
			}

			.icon-box {
				display: flex;
				width: 140rpx;
				justify-content: space-between;
			}
		}

		.sort-box {
			position: absolute;
			bottom: 0;
			width: 100%;
			overflow: hidden;
			display: flex;
			background-color: #fff;
			border-radius: 20rpx 20rpx 0 0;

			.sort-item-box {
				display: inline-block;
				padding-left: 30rpx;
				font-size: 14px;
				height: 80rpx;
				color: #494949;
				line-height: 80rpx;
			}

			.addcolor {
				color: #000;
				font-weight: bold;
			}

			.fliter-box {
				width: 100rpx;
				background-color: #f6f6f6;
				padding: 8rpx;
				position: absolute;
				top: 15rpx;
				right: 20rpx;
				font-size: 14px;
				display: flex;

				.sangle {
					position: absolute;
					right: 15rpx;
					bottom: 15rpx;
					width: 0;
					height: 0;
					border: 6rpx solid transparent;
					border-bottom-color: #000;
					border-right-color: #000;
				}
			}

		}
	}
</style>
